<template>
  <view class="template-classify" style="padding-top: 132rpx">
    <!-- 顶部自定义导航 -->
    <tn-nav-bar
      fixed
      class="tn-color-white"
      :bottomShadow="false"
      backgroundColor="#342c68"
      >全部圈子</tn-nav-bar
    >
    <view style="padding: 0 40rpx">
      <view class="search">
        <view
          class="tn-flex tn-flex-row-between tn-flex-col-center"
          style="width: 100%; height: 100%; color: #fff"
        >
          <view class="justify-content-item align-content-item">
            <view
              class="tn-flex tn-flex-col-center"
              style="width: 100%; height: 100%; color: #fff"
            >
              <text
                class="tn-icon-search justify-content-item tn-padding-right-xs tn-color-white tn-text-lg"
              ></text>
              <input
                class="justify-content-item"
                placeholder="搜索圈子关键词"
                v-model="searchKey"
                placeholder-style="color:#fff;font-size:24rpx; line-height:normal;"
              />
            </view>
          </view>

          <!-- <view class="align-content-item">
            <view class="justify-content-item tn-text-center" @click="sousuo()">
              <tn-button fontColor="#555555" :shadow="true" backgroundColor="#bcebff" shape="round"
                padding="20rpx 20rpx" width="150rpx" shadow fontBold>
                <text>搜索</text>
              </tn-button>

            </view>
          </view> -->
        </view>
      </view>
      <view class="tn-classify__wrap">
        <!-- 分类列表和内容 -->
        <view class="tn-classify__container" style="padding-top: 0">
          <view
            class="tn-classify__container__wrap tn-flex tn-flex-nowrap tn-flex-row-around"
          >
            <!-- 左边容器 -->
            <scroll-view
              style="flex-basis: 26%"
              class="tn-classify__left-box"
              :scroll-top="leftScrollViewTop"
              scroll-y
              scroll-with-animation
              :style="{
                height: scrollViewHeight + 'px',
                paddingTop: '40rpx',
              }"
            >
              <view
                v-for="(item, index) in tabbar"
                :key="index"
                :id="`tabbar_item_${index}`"
                class="tn-flex tn-flex-col-center"
                :class="[tabbarItemClass(index)]"
                @tap.stop="clickClassifyNav(item.id, index)"
                style="margin-bottom: 60rpx"
              >
                <view class="tn-classify__tabbar__item__title">{{
                  item.title
                }}</view>
              </view>
            </scroll-view>

            <!-- 右边容器 -->
            <scroll-view
              class="tn-classify__right-box"
              scroll-y
              :scroll-top="rightScrollViewTop"
              :style="{ height: scrollViewHeight + 'px' }"
            >
              <block>
                <view class="tn-classify__content" style="margin: 0">
                  <!-- 分类内容子栏目 -->
                  <view class="tn-classify__content__sub-classify">
                    <view
                      class="tn-classify__content__sub-classify__content tn-flex tn-flex-wrap tn-flex-col-center tn-flex-row-left"
                    >
                      <view style="width: 100%; margin: 40rpx 0">
                        <view
                          class="tn-flex-row-between tn-flex-col-between"
                          v-if="smalllist.length == 0"
                          style="padding: 150rpx 200rpx"
                        >
                          <tn-empty
                            icon="/static/images/no.png"
                            text="暂无圈子"
                          >
                          </tn-empty>
                        </view>
                        <view
                          v-if="smalllist.length !== 0"
                          style="
                            margin-bottom: 46rpx;
                            color: #fff;
                            font-size: 24rpx;
                          "
                          >精选圈子</view
                        >

                        <view
                          v-for="(sub_item, sub_index) in smalllist"
                          v-show="smalllist.length > 0"
                          :key="sub_index"
                          style="width: 100%; margin-bottom: 40rpx"
                        >
                          <view
                            class="tn-flex tn-flex-row-between tn-flex-col-center"
                            style="width: 100%; height: 92rpx"
                          >
                            <view
                              class="image-pic tn-flex"
                              @click="
                                navigateToFn({
                                  url:
                                    '/circleMixinPages/group?id=' + sub_item.id,
                                  checkLogin: false,
                                })
                              "
                              style="height: 100%"
                            >
                              <view style="margin-right: 20rpx">
                                <image
                                  :src="sub_item.image"
                                  mode="aspectFill"
                                  style="
                                    width: 92rpx;
                                    height: 100%;
                                    border-radius: 10rpx;
                                  "
                                ></image>
                              </view>
                              <view
                                style="
                                  color: #fff;
                                  display: flex;
                                  flex-direction: column;
                                  justify-content: space-between;
                                "
                                @click="
                                  navigateToFn({
                                    url:
                                      '/circleMixinPages/group?id=' +
                                      sub_item.id,
                                    checkLogin: false,
                                  })
                                "
                              >
                                <view
                                  class="tn-text-bold clamp-text-1 tn-text-justify"
                                  style="font-size: 28rpx"
                                >
                                  #{{ sub_item.title }}
                                </view>

                                <view
                                  class="tn-flex tn-flex-row-between tn-flex-col-between"
                                >
                                  <view
                                    class="justify-content-item tn-text-center"
                                    style="
                                      color: #d8d8d8;
                                      font-size: 20rpx;
                                      line-height: 28rpx;
                                    "
                                  >
                                    <text
                                      >{{ sub_item.follow
                                      }}{{
                                        sub_item.follow > 0 ? "W+" : ""
                                      }}人加入</text
                                    >
                                  </view>
                                </view>
                              </view>
                            </view>
                            <view
                              class="image-pic"
                              @click="guanzhu(sub_item.id, sub_index)"
                              v-if="type == 0"
                            >
                              <tn-button
                                shape="round"
                                backgroundColor="#24D4D1"
                                fontColor="#fff"
                                v-if="sub_item.is_follow"
                              >
                                <text>已加入</text>
                              </tn-button>
                              <tn-button
                                shape="round"
                                backgroundColor="#24D4D1"
                                fontColor="#fff"
                                v-else
                              >
                                <text>加入</text>
                              </tn-button>
                            </view>

                            <view
                              class="image-pic"
                              style="margin: 15px 2px; width: 170px"
                              @click="xuan(sub_item)"
                              v-if="type == 1"
                            >
                              <tn-button
                                shape="round"
                                backgroundColor="#FFF00D"
                                fontColor="#080808"
                              >
                                <text class="tn-text-bold">选择</text>
                              </tn-button>
                            </view>
                          </view>
                        </view>
                      </view>
                    </view>
                  </view>
                </view>

                <view class="tn-padding-bottom"></view>
              </block>
            </scroll-view>
          </view>
        </view>
      </view>
      // 登录框组件
      <login-fn
        :is-show-login="loginBoxFlag"
        @loginSuccessCallback="refreshFn"
        @close="closeGlobalLoginFn"
      >
      </login-fn>

      <view
        class="tn-flex tn-footerfixeddd"
        @click="
          navigateToFn({ url: '/circleMixinPages/build', checkLogin: true })
        "
        v-if="type == 0 && false"
      >
        <view
          class="tn-flex-1 justify-content-item tn-margin-sm tn-text-center"
        >
          <tn-button
            backgroundColor="rgb(0, 255, 198)"
            padding="20rpx 5px"
            shadow
            fontBold
          >
            <text class="tn-color-black tn-icon-add">建立圈子</text>
          </tn-button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "templateShopClassify",
  data() {
    return {
      // 侧边栏分类数据
      type: 0,
      searchKey: "",
      tabbar: [],
      // 分类里面的内容信息
      classifyContent: {
        // 推荐商品
        recommendProduct: [],
        // 子栏目
        subClassifyTabbar: [],
        // 显示子栏目分类选项
        showSubClassifyTabbar: false,
        // 每个子栏目下的内容
        subClassify: [],
      },
      // 分类菜单item的信息
      tabbarItemInfo: [],
      smalllist: [],
      // scrollView的top值
      scrollViewBasicTop: 0,
      // scrollView的高度
      scrollViewHeight: 0,
      // 左边scrollView的滚动高度
      leftScrollViewTop: 0,
      // 右边scrollView的滚动高度
      rightScrollViewTop: 0,
      // 当前选中的tabbar序号
      currentTabbarIndex: 1,
      id: 1,
      loginBoxFlag: false, // 登录框显示隐藏状态
      tages_checkedlist: [],
    };
  },
  computed: {
    tabbarItemClass() {
      return (index) => {
        if (index === this.currentTabbarIndex) {
          return "actice";
        } else {
          let clazz = "noActive";
          if (
            this.currentTabbarIndex > 0 &&
            index === this.currentTabbarIndex - 1
          ) {
            clazz += " tn-classify__tabbar__item--active--prev";
          }
          if (
            this.currentTabbarIndex < this.tabbar.length &&
            index === this.currentTabbarIndex + 1
          ) {
            clazz += " tn-classify__tabbar__item--active--next";
          }
          return clazz;
        }
      };
    },
  },
  onReady() {
    this.$nextTick(() => {
      this.getScrollViewInfo();
      this.getTabbarItemRect();
    });
    this.info();
    this.infosmall();
    uni.$off("setLoginBoxFlag_home");
    uni.$on("setLoginBoxFlag_home", (loginBoxFlag) => {
      this.loginBoxFlag = loginBoxFlag;
    });
  },
  onLoad(option) {
    if (option.type) {
      this.type = option.type;
    }
  },
  methods: {
    // 跳转

    sousuo() {
      if (this.searchKey == "") {
        this.msg("请输入关键词");
        return;
      }
      this.infosmall();
    },
    tn(e) {
      uni.navigateTo({
        url: e,
      });
    },
    huati(id, title) {
      let yixuan = [];
      if (
        this.tagList[index].checked == false &&
        this.tages_checkedlist.length >= this.configInfo.huatishu
      ) {
        this.msg("话题数不能超过" + this.configInfo.huatishu + "个");
        return;
      }

      this.tagList[index].checked = !this.tagList[index].checked;
      for (let i in this.tagList) {
        if (this.tagList[i].checked) {
          yixuan.push(this.tagList[i]);
        }
      }
      this.tages_checkedlist = yixuan;
    },

    async infosmall() {
      let that = this;
      let result = await that.$request({
        loading: 1,
        method: "post",
        url: "/chat/category/categorylist",
        data: {
          keys: this.searchKey,
          id: that.id,
        },
      });

      if (result.statusCode == 200) {
        if (result.data.code == 200) {
          that.smalllist = result.data.data;
        } else {
          uni.showToast({
            icon: "none",
            title: result.data.msg,
          });
        }
      } else {
        uni.showToast({
          icon: "none",
          title: that.$errorMsg,
        });
      }
    },

    async info() {
      let that = this;
      let result = await that.$request({
        loading: 1,
        method: "post",
        url: "/chat/category/quancategory",
        data: {},
      });

      if (result.statusCode == 200) {
        if (result.data.code == 200) {
          that.tabbar = result.data.data;
        } else {
          uni.showToast({
            icon: "none",
            title: result.data.msg,
          });
        }
      } else {
        uni.showToast({
          icon: "none",
          title: that.$errorMsg,
        });
      }
    },

    // 获取scrollView的高度信息
    getScrollViewInfo() {
      const systemInfo = uni.getSystemInfoSync();
      this.scrollViewBasicTop = systemInfo.statusBarHeight + uni.upx2px(10);
      this.scrollViewHeight =
        systemInfo.safeArea.height +
        systemInfo.statusBarHeight -
        uni.upx2px(10);
    },
    // 获取分类菜单每个item的信息
    getTabbarItemRect() {
      let view = uni.createSelectorQuery().in(this);
      for (let i = 0; i < this.tabbar.length; i++) {
        view.select("#tabbar_item_" + i).boundingClientRect();
      }
      view.exec((res) => {
        if (!res.length) {
          setTimeout(() => {
            this.getTabbarItemRect();
          }, 10);
          return;
        }

        // 将每个分类item的相关信息
        res.map((item) => {
          this.tabbarItemInfo.push({
            top: item.top,
            height: item.height,
          });
        });
      });
    },

    // 点击了分类导航
    clickClassifyNav(id, index) {
      if (this.currentTabbarIndex === index) {
        return;
      }

      if (index == 0 && !uni.getStorageSync("token")) {
        this.loginBoxFlag = true;
        return false;
      }

      this.currentTabbarIndex = index;
      this.id = id;
      this.infosmall();
      this.handleLeftScrollView(index);
      this.switchClassifyContent();
    },

    xuan(item) {
      uni.$emit("quan", item);
      uni.navigateBack();
    },

    async guanzhu(id, index) {
      if (!this.isLogin) {
        this.loginBoxFlag = true;
        return false;
      }

      let that = this;
      let result = await that.$request({
        loading: 1,
        method: "post",
        url: "/chat/user/followgroup",
        data: {
          id: id,
        },
      });
      if (result.statusCode == 200) {
        if (result.data.code == 200) {
          if (result.data.msg == "取消成功") {
            that.smalllist[index].is_follow = false;
          } else {
            that.smalllist[index].is_follow = true;
          }
          uni.showToast({
            icon: "none",
            title: result.data.msg,
          });
        } else {
          uni.showToast({
            icon: "none",
            title: result.data.msg,
          });
        }
      } else {
        uni.showToast({
          icon: "none",
          title: that.$errorMsg,
        });
      }
    },

    // 点击分类后，处理scrollView滚动到居中位置
    handleLeftScrollView(index) {
      const tabbarItemTop =
        this.tabbarItemInfo[index].top - this.scrollViewBasicTop;
      if (tabbarItemTop > this.scrollViewHeight / 2) {
        this.leftScrollViewTop =
          tabbarItemTop -
          this.scrollViewHeight / 2 +
          this.tabbarItemInfo[index].height;
      } else {
        this.leftScrollViewTop = 0;
      }
    },
    // 切换对应分类的数据
    switchClassifyContent() {
      this.rightScrollViewTop = 1;
      this.$nextTick(() => {
        this.rightScrollViewTop = 0;
      });
      //  this.classifyContent.subClassify[0].title = this.tabbar[this.currentTabbarIndex]
    },
  },
};
</script>

<style lang="scss" scoped>
.actice {
  color: #24d4d1;
  font-family: Source Han Sans;
  font-size: 28rpx;
  font-weight: bold;
}

.noActive {
  color: #fff;
  font-family: Source Han Sans;
  font-size: 24rpx;
}

.tn-classify {
  /* 搜索栏 start */
  &__search {
    &--wrap {
      height: 126rpx;
    }

    &__box {
      flex: 1;
      text-align: center;
      padding: 20rpx 0;
      margin: 0 30rpx;
      border-radius: 60rpx;
      font-size: 26rpx;
    }

    &__icon {
      padding-right: 10rpx;
    }
  }

  /* 搜索栏 end */

  /* 分类列表和内容 strat */
  &__container {
    padding-top: 10rpx;
  }

  &__left-box {
  }

  &__right-box {
    background-color: transparent;
  }

  /* 分类列表和内容 end */

  /* 侧边导航 start */
  &__tabbar {
    &__item {
      height: 120rpx;

      &:first-child {
        border-top-right-radius: 0rpx;
      }

      &:last-child {
        border-bottom-right-radius: 0rpx;
      }

      &--active {
        background-color: #ffffff;
        position: relative;
        font-weight: bold;

        &::before {
          content: "";
          position: absolute;
          width: 12rpx;
          height: 40rpx;
          top: 50%;
          left: 0;
          background-color: #fbbd12;
          border-radius: 12rpx;
          transform: translateY(-50%) translateX(-50%);
        }

        &--prev {
          border-bottom-right-radius: 26rpx;
        }

        &--next {
          border-top-right-radius: 26rpx;
        }
      }
    }
  }

  /* 侧边导航 end */

  /* 分类内容 start */
  &__content {
    margin: 18rpx;

    /* 推荐商品 start */
    &__recomm {
      margin-bottom: 40rpx;

      &__swiper {
      }
    }

    /* 推荐商品 end */

    /* 子栏目 start */
    &__sub-classify {
      margin-bottom: 20rpx;

      &--title {
        font-weight: bold;
        margin-bottom: 18rpx;
      }

      &__content {
        &__item {
          width: 33%;
        }

        &__image {
          background-color: rgba(188, 188, 188, 0.1);
          border-radius: 12rpx;
          margin: 10rpx;
          margin-left: 0;
          width: 100%;
          height: 160rpx;
          overflow: hidden;
          border: 1rpx solid rgba(0, 0, 0, 0.02);

          image {
            width: 100%;
            height: 160rpx;
          }
        }

        &__title {
          margin-right: 10rpx;
        }
      }
    }

    /* 子栏目 end */
  }

  /* 分类内容 end */
}

.tn-footerfixeddd {
  bottom: 5px;
  right: 30%;
  position: fixed;
  width: 34%;
  box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0);
}

.template-classify {
  background: linear-gradient(0deg, #39308d 0%, #342c67 100%);
}
.search {
  width: 100%;
  height: 64rpx;
  padding: 0 40rpx;
  border: 1px solid #ffffff;
  border-radius: 32rpx;
}
</style>
